<template>
  <div class="content-div">
    <div class="page-head">
      <span v-if="orderInfo.state == '2'">已通知陪诊师来抢单啦~</span>
      <span v-if="orderInfo.state == '2'">距抢单结束还剩：<span style="color: #FF0000;">00时 00分 00秒</span></span>
      <span v-if="orderInfo.state == '1'">订单待付款</span>
      <span v-if="orderInfo.state == '1'">请在：<span style="color: #FF0000;">00时 00分 00秒</span>内完成支付，超时订单自动取消</span>
      <span v-if="orderInfo.state === '3'">已接单</span>
      <span v-if="orderInfo.state === '4'">已取消</span>
      <span v-if="orderInfo.state === '5'">服务中</span>
      <span v-if="orderInfo.state === '6'">已完成</span>
      <span v-if="orderInfo.state === '7'">已验收/待评价</span>
      <span v-if="orderInfo.state === '8'">已评价</span>
    </div>
    <van-tabs class="tab-box" color="#1989fa" title-active-color="#1989fa" line-width="20px" v-model="active_tab">
      <van-tab title="陪诊师信息">
        <div class="waiter-box" v-if="orderInfo.state == '1' || orderInfo.state == '2'">
          <img class="jiedan-icon" src="@/assets/images/icon-jd.png" v-if="orderInfo.state == '2'" />
          <span v-if="orderInfo.state == '2'">请关注通知，若有师傅抢单将会在第一 时间通知您</span>
          <img class="fukuan-icon" src="@/assets/images/icon-fk.png" v-if="orderInfo.state == '1'" />
          <span v-if="orderInfo.state == '1'">您已下单成功，记得尽快付款哦~</span>
          <span style="color: #999999;" v-if="orderInfo.state == '2'">付款后将会有陪诊师跟您联系，并预约服务时间</span>
        </div>
        <div class="waiter-box1" v-else-if="waiterInfo.accompanying_physician_id">
          <div class="base-info-box">
            <div class="name-box">
              <img :src="waiterInfo.head_sculpture" alt="" srcset="">
              <span>{{waiterInfo.name}}</span>
            </div>
            <div class="base-out">
              <div class="base-out-line">
                <span>性别：</span>
                <span v-if="waiterInfo.sex === '1'">男</span>
                <span v-if="waiterInfo.sex === '2'">女</span>
              </div>
              <div>
                <span>年龄：</span>
                <span>{{waiterInfo.age}}</span>
              </div>
              <div>
                <span>护龄：</span>
                <span>{{waiterInfo.nurse_age}}年</span>
              </div>
              <div>
                <span>籍贯：</span>
                <span>{{waiterInfo.native_place}}</span>
              </div>
            </div>
          </div>
          <div class="base-info-box">
            <div class="gw-box">
              <div>
                <span style="color: #1989fa;">{{waiterInfo.memberNumbers}}</span>
                <span>陪诊次数</span>
              </div>
              <div>
                <span style="color: #FF0000;">{{physicianInfo.avgNumber}}%</span>
                <span>好评率</span>
              </div>
              <div>
                <span>{{physicianInfo.evaluateNumbers}}</span>
                <span>评论数</span>
              </div>
            </div>
          </div>
          <div class="base-info-box">
            <div class="base-out1">
              <span>陪诊医院：</span>
              <span>{{orderInfo.hospital_name}}</span>
            </div>
            <div class="base-out1 bottom-10">
              <span>陪诊项目：</span>
              <span>{{physicianInfo.giveServiceName}}</span>
            </div>
            <div class="base-out1">
              <span>个人简介：</span>
              <span>{{waiterInfo.brief_introduction}}</span>
            </div>
          </div>
          <div class="base-info-box2">
            <div style="border-color: #11cbc5;" @click="cellPhone">
              <van-icon color="#11cbc5" name="phone" />
              <span>电话咨询</span>
            </div>
            <div @click="toPage('/msgDetail', {type: '2', accompanying_physician_id: waiterInfo.accompanying_physician_id, have_no_read: waiterInfo.noReadNum > 0 ? 1 : 0, wid: waiterInfo.wid})">
              <van-icon color="#1989fa" name="comment" />
              <span>在线咨询</span>
            </div>
          </div>
        </div>
        <div class="liucheng-box">
          <img src="@/assets/images/order-bg.png" alt="">
          <div class="liucheng-text">
            <span>在线下单</span>
            <span>预约</span>
            <span>服务完成</span>
            <span>完工评价</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="订单信息">
        <div class="order-info-box" v-if="orderInfo.state > 3 || orderInfo.state == '3'">
          <div class="order-card-title">
            <span>陪诊师</span>
          </div>
          <div class="waiter-info-box">
            <img :src="waiterInfo.head_sculpture" alt="" srcset="">
            <div class="waiter-name-box">
              <span style="font-weight: bold;">{{waiterInfo.name}}</span>
              <div class="waiter-type">
                <span style="color: #1989fa;background-color: rgba(89,89,255,.07);">身份认证</span>
                <span style="background-color: rgba(234,135,68,.07);color: #ea8744;">资格证书</span>
              </div>
            </div>
          </div>
        </div>
        <div class="order-info-box">
          <div class="order-card-title">
            <span>订单信息</span>
          </div>
          <div class="order-item-box">
            <span>服务类型</span>
            <span style="color: #1989fa;">一对一陪护</span>
          </div>
          <div class="order-item-box">
            <span>订单编号</span>
            <span>{{orderInfo.order_number}}</span>
          </div>
          <div class="order-item-box">
            <span>下单时间</span>
            <span>2023-06-07 15:45</span>
          </div>
          <div class="order-item-box">
            <span>订单金额</span>
            <span>￥{{orderInfo.payable_amount}}</span>
          </div>
          <div class="order-item-box2">
            <span>应付款</span>
            <span style="color: #FF0000;">￥88.00</span>
          </div>
        </div>
        <div class="order-info-box">
          <div class="order-card-title">
            <span>预约信息</span>
          </div>
          <div class="order-item-box">
            <span>期望就诊时间</span>
            <span>{{orderInfo.expectedTime}}</span>
          </div>
          <div class="order-item-box">
            <span>就诊医院</span>
            <span>{{orderInfo.hospital_name}}</span>
          </div>
          <div class="order-item-box">
            <span>科室</span>
            <span>{{orderInfo.department_name}}</span>
          </div>
          <div class="order-item-box">
            <span>就诊人</span>
            <span>{{orderInfo.visitor_name}}</span>
          </div>
          <div class="order-item-box">
            <span>就诊人电话</span>
            <span>{{orderInfo.visitor_tel}}</span>
          </div>
          <div class="order-item-box" v-if="isShowAll">
            <span>与就诊人关系</span>
            <span>其他</span>
          </div>
          <div class="more-box">
            <div v-if="!isShowAll" @click="isShowAll=!isShowAll">
              <span>查看更多</span>
              <van-icon name="arrow-down" />
            </div>
            <div v-else @click="isShowAll=!isShowAll">
              <span>收起</span>
              <van-icon name="arrow-up" />
            </div>
          </div>
        </div>
        <div class="order-info-box">
          <div class="order-card-title">
            <span>服务确认码</span>
          </div>
          <div class="code-box">{{orderInfo.verification_code}}</div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="gn-btn-box" v-if="orderInfo.state === '1' || orderInfo.state === '2' || orderInfo.state === '3'">
      <div class="gn-btn" @click="cancelDrder()">取消订单</div>
    </div>
    <div class="gn-btn-box" v-if="orderInfo.state === '7'">
      <div class="gn-btn" @click.stop="$router.push(`/nursingEvaluation?order_goods_id=${$route.query.order_goods_id}`)">护工评价</div>
    </div>
  </div>
</template>
<script>
import { getOrderDetails, saveOrderGoodsNext, getAccompanyingPhysician } from '@/api/medical.js'
import { Dialog, Toast } from 'vant'
export default {
  name: 'index',
  data () {
    return {
      isShowAll: false,
      active_tab: 0,
      waiterInfo: {}, // 陪诊师信息
      orderInfo: { // 订单信息
        status: '2',
        code: '634873'
      },
      physicianInfo: {}
    }
  },
  created () {},
  methods: {
    cellPhone () {
      window.location.href = `tel:${this.dataInfo.phone}`
    },
    async getOrderDetailInfo () {
      await this.getOrderData(this.$route.query.order_goods_id)
    },
    getOrderData (order_goods_id) {
      getOrderDetails({ order_goods_id: order_goods_id }).then(res => {
        if (res.data.errcode === 0) {
          this.orderInfo = res.data.data.orderDetails
          this.waiterInfo = res.data.data.medicalAccompanyingPhysician
          if (this.waiterInfo.accompanying_physician_id) {
            this.getAccompanyingPhysicianData()
          }
          console.log(this.waiterInfo)
        }
      })
    },
    getAccompanyingPhysicianData () {
      getAccompanyingPhysician({ accompanying_physician_id: this.waiterInfo.accompanying_physician_id }).then(res => {
        if (res.data.errcode === 0) {
          this.physicianInfo = res.data.data
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    cancelDrder (item) { // 取消订单
      Dialog.confirm({
        title: '提示',
        message: '确定取消订单？'
      }).then(() => {
        saveOrderGoodsNext({ order_goods_id: this.$route.query.order_goods_id, state: '4' }).then(res => {
          if (res.data.errcode === 0) {
            Toast.success('取消成功！')
            this.getOrderData(this.$route.query.order_goods_id)
          }
        })
      })
    },
    evaluate () { // 护工评价
      this.$router.push({
        path: ''
      })
    },
    toPage (path, query) { // 在线咨询
      this.$router.push({
        path,
        query
      })
    }
  },
  mounted () {
    this.getOrderDetailInfo()
    // this.getOrderData(this.$route.query.order_goods_id)
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #F8F8F8;
    min-height: 100%;
    position: relative;
    .page-head{
      width: 100%;
      height: 120px;
      background-color: #1989fa;
      display: flex;
      box-sizing: border-box;
      padding: 36px 0;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      color: #FFFFFF;
    }
    .tab-box{
      width: 300px;
      margin-left: 10px;
      overflow: hidden;
      position: relative;
      top: -16px;
      padding-bottom: 56px;
      /deep/ .van-tabs__wrap{
        padding-bottom: 6px;
        border-radius: 6px;
      }
      .waiter-box{
        margin-top: 10px;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 20px 10px;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .jiedan-icon{
          width: 140px;
        }
        .fukuan-icon{
          width: 100px;
        }
        span{
          padding-top: 6px;
          display: block;
          width: 100%;
          text-align: center;
        }
      }
      .waiter-box1{
        margin-top: 30px;
        .base-info-box{
          background-color: #FFFFFF;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 6px;
          margin-bottom: 10px;
          position: relative;
          z-index: 1;
          .name-box{
            font-size: 14px;
            padding-bottom: 2px;
            font-weight: bold;
            padding-bottom: 16px;
            img{
              width: 50px;
              height: 50px;
              position: absolute;
              top: -20px;
              border-radius: 50%;
            }
            span{
              padding-left: 60px;
            }
          }
          .base-out{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            div{
              width: 50%;
              padding-bottom: 10px;
              span:first-child{
                color: #999999;
              }
            }
          }
          .gw-box{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            div{
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              span:first-child{
                font-size: 16px;
                padding-bottom: 4px;
              }
            }
          }
          .base-out1{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            padding-bottom: 10px;
            span:first-child{
              color: #999999;
            }
            span:last-child{
              flex: 1;
            }
          }
        }
        .base-info-box2{
          padding: 0 10px;
          box-sizing: border-box;
          margin-bottom: 10px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          div{
            width: calc(50% - 5px);
            text-align: center;
            height: 30px;
            border: 1px solid #1989fa;
            line-height: 30px;
            border-radius: 5px;
            background-color: #FFFFFF;
            span{
              padding-left: 4px;
            }
          }
        }
      }
      .liucheng-box{
        margin-top: 10px;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 0 10px 10px;
        border-radius: 6px;
        img{
          width: 100%;
        }
        .liucheng-text{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
      }
      .order-info-box{
        margin-top: 10px;
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 10px;
        border-radius: 6px;
        .order-card-title{
          position: relative;
          padding-bottom: 10px;
        }
        .order-card-title::before{
          position: absolute;
          left: -10px;
          width: 3px;
          height: 10px;
          background-color: #1989fa;
          top: 3px;
          content: ' ';
        }
        .waiter-info-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .waiter-name-box{
            padding-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            height: 40px;
            .waiter-type{
              font-size: 10px;
              span{
                padding: 2px 6px;
                margin-right: 6px;
                border-radius: 4px;
              }
            }
          }
        }
        .order-item-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          span:first-child{
            color: #999999;
          }
        }
        .order-item-box2{
          text-align: right;
          font-weight: bold;
        }
        .more-box{
          padding: 4px;
          div{
            text-align: center;
            color: #999999;
            span{
              padding-right: 4px;
            }
          }
        }
        .code-box{
          text-align: center;
          font-size: 18px;
          font-weight: bold;
          color: #1989fa;
          padding-bottom: 16px;
        }
      }
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
  }
</style>
